<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery.js" th:src="@{/jquery.js}"></script>
</head>
<body>
<p>
    <button class="login_btn"> click</button>
<div>
    <img id="img1" src="" alt="抠图"  style="position: absolute;left:0;">
    <img id="img2" src="" alt="大图" style=" -webkit-user-drag: none;">
</div>

</p>
</body>
<script>
    $(document).on('click', '.login_btn', function (event) {
        $.ajax({
            type: "get",
            url: "/getImageVerifyCode.do",
            data: $("#loginForm").serialize(),
            dataType: "json",
            success: function (data) {
                var url = "data:image/jpg;base64," + data.smallImage;
                var url2 = "data:image/jpg;base64," + data.bigImage;
                var style="position: absolute;margin-top:"+data.yHeight+"px;"
                $("#img1").attr("src", data.smallImage);
                $("#img1").attr("style", style);
                $("#img2").attr("src", data.bigImage);
            }
        })
    })

    //拖拽事件
    // $(document).on('mousedown', '#img1', function (event) {
    //     console.log(">>>>>>>>>>>>>>>>>>>>>",event)
    //     // $("#img1").mousemove(function(e){
    //     //     console.log("移动距离》》》"+e);
    //     // });
    //     //释放鼠标
    //     // document.onmouseup = function() {
    //     //     document.onmousemove = null;
    //     //     //目的是为了让鼠标松开事件变成一次性
    //     //     $("#img1").onmouseup = null;
    //     // }
    // })
    var box1 = document.querySelector('#img1')

    box1.onmousedown = (e) => {

        // 获取鼠标相对于box元素的位置
        e = e || window.event
        var divX = e.offsetX
        var divY = e.offsetY
        // 鼠标移动，将鼠标位置给到box1
        document.onmousemove = (e) => {
            document.onmouseup = (e) => {
                console.log(e)
                document.onmousemove = null
            }
            e = e || window.event
            var x = e.clientX - divX >= 0 ? (e.clientX - divX) : 0
            // var y = e.clientY - divY >= 0 ? (e.clientY - divY) : 0

            box1.style.left = x + 'px'
            // box1.style.top = y + 'px'
            console.log(">>>>>>>>>>>>x的距离"+x);
        }

    }
    // 鼠标松开

</script>
</html>